<template>
  <a-modal
    :visible="visible"
    @cancel="onCancel"
    @close="onClose"
    :title="modalConfig.title"
    :mask-closable="false"
    unmount-on-close
    width="45%"
  >
    <div>请选择配置的费项名称</div>
    <a-radio-group direction="vertical" v-model="selectedFeeItem" @change="handleChange">
      <a-radio v-for="item in modalConfig.feeItemEnums" :key="item.value" :value="item.value">
        {{ item.label }}
      </a-radio>
    </a-radio-group>

    <template #footer>
      <a-button type="secondary" @click="onCancel">取消</a-button>
      <a-button type="primary" @click="onOk" :disabled="!selectedFeeItem">确定</a-button>
    </template>
  </a-modal>

  <ConfigModal ref="configModalRef" @ok="handleOk" />
</template>

<script setup lang="ts">
  import ConfigModal from '../../../revenue-summary/components/config-modal.vue'

  import { ref } from 'vue'

  const visible = ref(false)
  const configModalRef = ref()
  const modalConfig = ref<any>({
    title: '配置',
    feeItemEnums: [],
  })
  const selectedFeeItem = ref('')
  const emits = defineEmits(['ok', 'cancel', 'close'])

  const radioType = ref()
  const handleChange = (value: string) => {
    radioType.value = value
  }

  const onCancel = () => {
    visible.value = false
    emits('cancel')
  }

  const onClose = () => {
    selectedFeeItem.value = ''
    emits('close')
  }

  const onOk = () => {
    visible.value = false

    let title = ''
    let content = ''
    if (radioType.value == 1) {
      title = '保险费配置'
      content = '不计免赔还包含：'
    } else if (radioType.value == 2) {
      title = '车损费配置'
      content = '车损费还包含：'
    } else if (radioType.value == 3) {
      title = '油电费配置'
      content = '油电费还包含：'
    }
    configModalRef.value.open(title, content, radioType.value)
  }

  const handleOk = (type: string, params: any) => {
    console.log(type, params)
    emits('ok', type, params)
  }

  const open = (feeItemEnums: any) => {
    modalConfig.value.feeItemEnums = feeItemEnums
    visible.value = true
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped></style>
